<template>
  <div class="app-container">
    <div class="card-box">
      <el-table :data="taskLogStore.list" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="task.name" label="关联任务" />
        <el-table-column prop="target_url" label="目标URL" />
        <el-table-column prop="response_status" label="响应状态" />
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" @click="handleDetail(row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-model:page="listQuery.page"
        v-model:limit="listQuery.size"
        :total="taskLogStore.totalCount"
        @pagination="fetchData"
      />
    </div>

    <Detail v-if="currentDetail" v-model="detailVisible" :detail="currentDetail" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useTaskLogStoreHook } from "@/store/modules/task/log";
import Pagination from "@/components/Pagination/index.vue";
import Detail from "./components/Detail.vue";
import { TaskLogType } from "@/api/task/log";

const taskLogStore = useTaskLogStoreHook();

const listQuery = reactive({
  page: 1,
  size: 20,
});

const detailVisible = ref(false);
const currentDetail = ref<TaskLogType | null>(null);

async function fetchData() {
  await taskLogStore.fetchList(listQuery);
}

async function handleDetail(id: number) {
  currentDetail.value = await taskLogStore.fetchDetail(id);
  detailVisible.value = true;
}

onMounted(() => {
  fetchData();
});
</script>
